<template>
  <div id="home">
    <nav-bar class="nav-bar">
      <div slot="center">购物街</div>
    </nav-bar>
    <tab-control
      class="tab-control"
      v-show="isFixed"
      :titles="['流行','新款','精选']"
      @itemClick="tabClick"
      ref="tabControl1"
    ></tab-control>
    <scroll
      class="content"
      ref="scroll"
      :probe-type="3"
      :pull-up-load="true"
      @scroll="contentScroll"
      @pullingUp="loadMore"
    >
      <div>
        <home-swiper :banners="banners" ref="hSwiper" @imgLoad="loadImg"></home-swiper>
        <feature-view :features="features"></feature-view>
        <recommend-view></recommend-view>
        <tab-control :titles="['流行','新款','精选']" @itemClick="tabClick" ref="tabControl2"></tab-control>
        <good-list :goods="goods[currentType].list"></good-list>
      </div>
    </scroll>
    <back-top @click.native="backTop" v-if="isShow"></back-top>
  </div>
</template>
<script>
import NavBar from "common/navbar/NavBar";
import Scroll from "common/scroll/Scroll";
import TabControl from "content/tabControl/TabControl";
import BackTop from "content/backtop/BackTop";
import GoodList from "content/goods/GoodList";
import HomeSwiper from "views/home/childComps/HomeSwiper";
import FeatureView from "views/home/childComps/FeatureView";
import RecommendView from "views/home/childComps/RecommendView";
import { request } from "network/request";
import { debounce } from "../../common/utils";
import Qs from "qs";
export default {
  name: "Home",
  components: {
    NavBar,
    Scroll,
    TabControl,
    BackTop,
    GoodList,
    HomeSwiper,
    FeatureView,
    RecommendView
  },
  data() {
    return {
      banners: [],
      features: [],
      goods: {
        pop: { page: 1, list: [] },
        new: { page: 1, list: [] },
        sell: { page: 1, list: [] }
      },
      currentType: "pop",
      isShow: false,
      tabOffsetTop: 0,
      isFixed: false,
      saveY: 0
    };
  },

  activated() {
    this.$refs.scroll.scrollTo(0, this.saveY, 0);
    this.$refs.scroll.refresh();
  },
  deactivated() {
    this.saveY = this.$refs.scroll.getScrollY();
  },
  created() {
    //请求多个数据
    this.getMultiData();
    //请求商品数据
    this.getGoodList("pop");
    this.getGoodList("new");
    this.getGoodList("sell");
  },
  mounted() {
    //监听item中图片加载完成，这个放在mounted中更加保险一些，放在created中可能会没有值
    const refresh = debounce(this.$refs.scroll.refresh);
    this.$bus.$on("itemImageLoad", () => {
      //console.log("你说他执行了几次");
      refresh();
    });
  },
  methods: {
    async getMultiData() {
      const res = await request({
        url: "/home/multidata"
      });
      console.log(res);
      this.banners = res.data.data.banner.list;
      this.features = res.data.data.recommend.list;
    },
    async getGoodList(type) {
      let page = this.goods[type].page;
      const res = await request({
        url: "/home/data",
        params: {
          type,
          page
        }
      });
      console.log(res);
      const goodsList = res.data.data.list;
      //console.log(goodsList);
      this.goods[type].list.push(...goodsList);
      this.goods[type].page += 1;

      this.$refs.scroll.scroll.finishPullUp();
    },
    tabClick(index) {
      console.log("传过来了吗");
      switch (index) {
        case 0:
          this.currentType = "pop";
          break;
        case 1:
          this.currentType = "new";
          break;
        case 2:
          this.currentType = "sell";
          break;
      }
      this.$refs.tabControl1.i = index;
      this.$refs.tabControl2.i = index;
    },
    //回到顶部
    backTop() {
      this.$refs.scroll.scrollTo(0, 0, 500);
      this.isShow = false;
    },
    //回到顶部图标的显示与隐藏
    contentScroll(position) {
      if (-position.y > 1000) {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
      this.isFixed = -position.y > this.tabOffsetTop;
    },
    loadMore() {
      this.getGoodList(this.currentType);
      this.$refs.scroll.refresh();
    },
    loadImg() {
      this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop;
    }
  }
};
</script>
<style scoped>
#home {
  position: relative;
  height: 100vh;
  width: 100%;
}
.tab-control {
  position: relative;
  z-index: 9;
  background: #fff;
}
.nav-bar {
  position: relative;
  background-color: var(--color-tint);
  font-weight: 700;
  color: #fff;
  z-index: 100;
}

.content {
  position: absolute;
  top: 44px;
  bottom: 47px;
  left: 0;
}
</style>
